<template>
  <div class="teacherInfo">
      <!--<mt-header fixed title="教师信息查询"></mt-header>-->
      <mt-header title="教师查询">
        <router-link to="/MainContent" slot="left">
          <mt-button icon="back">返回</mt-button>
        </router-link>
        <mt-button icon="more" slot="right"></mt-button>
      </mt-header>

     <!-- <mt-actionsheet
        :actions="actions"
        v-model="sheetVisible">
      </mt-actionsheet>-->
      <!--<button @click="changeSheet">打开sheet脚本</button>-->
      <div class="selectItem">
        <mt-button plain size="large" type="" style="width:99%;margin:0 auto"  @click.native="namePopupVisible = true">选择教师姓名</mt-button>
        <p><label class="myLabel">教师姓名</label>&nbsp;&nbsp;{{ selectedName }}</p>
        <mt-popup v-model="namePopupVisible" position="bottom" class="mint-popup-4">
          <mt-picker :slots="teacherName" @change="onNameChange"></mt-picker>
        </mt-popup>
      </div>
      <div class="selectItem">
        <mt-button plain  size="large" type="" style="width:99%;margin:0 auto"  @click.native="sexPopupVisible = true">选择教师性别</mt-button>
        <p><label class="myLabel">教师性别</label>&nbsp;&nbsp;{{ selectedSex }}</p>
        <mt-popup v-model="sexPopupVisible" position="bottom" class="mint-popup-4">
          <mt-picker :slots="sexName" @change="onSexChange"></mt-picker>
        </mt-popup>
      </div>

      <div class="selectItem">
        <mt-button plain  size="large" type="" style="width:99%;margin:0 auto"  @click.native="jobPopupVisible = true">选择教师职称</mt-button>
        <p><label class="myLabel">教师职称</label>&nbsp;&nbsp;{{ selectedJob }}</p>
        <mt-popup v-model="jobPopupVisible" position="bottom" class="mint-popup-4">
          <mt-picker :slots="jobName" @change="onJobChange"></mt-picker>
        </mt-popup>
      </div>

      <div class="selectItem">
        <mt-button plain  size="large" type="" style="width:99%;margin:0 auto"  @click.native="degreePopupVisible = true">选择教师职称</mt-button>
        <p><label class="myLabel">教师学位</label>&nbsp;&nbsp;{{ selectedDegree }}</p>
        <mt-popup v-model="degreePopupVisible" position="bottom" class="mint-popup-4">
          <mt-picker :slots="degreeName" @change="onDegreeChange"></mt-picker>
        </mt-popup>
      </div>

      <mt-button type="primary" size="large" style="width:99%;margin:0 auto" @click="toList">
        查询
        <img src="./search.png" height="20" width="20" slot="icon">
      </mt-button>
  </div>
</template>
<script>
  export default{
      name:'teacherInfo',
      data(){
          return {
            namePopupVisible:false,
            sexPopupVisible:false,
            jobPopupVisible:false,
            degreePopupVisible:false,
            teacherName:[{
                flex: 1,
                values: ['blue', 'jerry', 'tom', 'jack'],
                className: 'slotName',
                textAlign: 'center'
              }
              ],
              sexName:[{
                flex: 1,
                values: ['男','女'],
                className: 'slotSex',
                textAlign: 'center'
              }
              ],
              jobName:[{
                flex: 1,
                values: ['院长','教授','教师'],
                className: 'slotJob',
                textAlign: 'center'
              }
              ],
              degreeName:[{
                flex: 1,
                values: ['大专','本科','博士'],
                className: 'slotDegree',
                textAlign: 'center'
              }
              ],
              selectedName:'',
              selectedSex:'',
              selectedJob:'',
              selectedDegree:'',

          }
      },
      methods:{
          onNameChange:function(picker,values){
              this.namePopupVisible = false;
              this.selectedName = values[0];
          },
          onSexChange:function(picker,values){
              this.selectedSex = values[0];
          },
          onJobChange:function(picker,values){
            this.selectedJob = values[0];
          },
          onDegreeChange:function(picker,values){
            this.selectedDegree = values[0];
          },
          toList:function(){
              this.$router.push({name:'TeacherListInfo'});
          }
      }
  }
</script>
<style>
  .slotName{
    border-bottom:1px solid rgb(86,165,232);
  }
  .mint-popup-4 {
    width: 100%;
  }
  .picker-slot-wrapper, .picker-item{
    backface-visibility: hidden;
  }
  .selectItem{
    margin-bottom:0px;
  }
  .selectItem p{
      width:99%;
      margin:0 auto;
      height:40px;
      line-height:40px;
  }
  .selectItem .myLabel{
      font-family: Arial;
      color:rgb(38,162,255);
      font-weight: bold;
  }
</style>
